<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css和style样式</title>
</head>
<body>
<div id="app">
    <!--
    通过css 可以看到样式是否设置了样式
    html属性不能使用双大括号形式绑定，只能使用v-bind指令。
    :class 是v-bind:class的简写形式
    -->
    <div :class="{ active: isActive }"></div>
    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    <div v-bind:class="[activeClass, errorClass]"></div>

    <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError}">
    </div>
    <!--设置数据对象的模式-->
    <div class="static1" v-bind:class="classObject"></div>

    <!--绑定style-->
    <div v-bind:style="[baseStyles, overridingStyles]">hello world style</div>
    <div v-bind:style="overridingStyles">hello world style</div>
    <!--`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。
    CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
     -->
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello world style</div>
    <div v-bind:style="styleObject">hello world style</div>

</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var app =new Vue({
        el:"#app",
        data:{
            isActive: false,
            hasError: true,
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error'],
            classObject: {
                active: true,
                'text-danger': false
            },
            baseStyles: {'background-color': 'red'},
            overridingStyles: {border: '1px solid black'},
            activeColor: 'red',
            fontSize: 30,
            styleObject: {
                color: 'red',
                fontSize: '33px'
            }
        },

    });
</script>
</html>